<template>
    <div class="view-container">

        <header-module left-custom padding>
            <template #left-con>
                <div>

                    <span v-if="datas.taskType == 1">区域招商</span>
                    <span v-else-if="datas.taskType == 2">精细招商</span>
                    <span v-else-if="datas.taskType == 3">终端直销</span>
                    <span v-else-if="datas.taskType == 4">商业营销</span>

                    <span class="view-title">{{datas.taskNo}}</span>

                    <el-tag size="small" type="warning">
                        {{ getLabel('task_status', datas.taskStatus) }}
                    </el-tag>
                </div>
            </template>

            <template #btn>
                <el-button class="main-btn" size="small" @click="onBack">返回</el-button>
                <el-button
                        v-if="datas.taskType == 1 || datas.taskType == 2"
                        lass="main-btn" size="small" type="primary" @click="onAgent">检索代理商库
                </el-button>
                <el-button
                        v-auth="{v:['crm:marketing:task:allocation'],bool:datas.taskStatus == 0}"
                        lass="main-btn" size="small" type="primary" @click="onAllocation">分配
                </el-button>

            </template>

        </header-module>

        <signedDetail v-if="datas.taskType == 1" :datas="relationData" :all-data="allData" @plan="onPlan"/>

        <fineDetail v-else-if="datas.taskType == 2" :datas="relationData" :all-data="allData" @plan="onPlan" @price="onPrice"/>

        <directDetail v-else-if="datas.taskType == 3" :datas="relationData" :all-data="allData" @plan="onPlan" @price="onPrice"/>

        <businessDetail v-else-if="datas.taskType == 4" :datas="relationData" :all-data="allData" @plan="onPlan"/>

        <detail-drawer
                ref="detailDrawer"
                :size-width="1000"
                custom-title
        >
            <template #title>
                <span>检索代理库</span>
            </template>
            <template #contents>

                <agentLibrary :datas="libraryData"/>

            </template>
        </detail-drawer>

        <altBusinessDialog ref="altBusiness" @success="getData"/>

        <allocationDialog ref="refAllocation" @success="getData"/>

        <altDirectDialog ref="altDirectDialog" @success="getData"/>

        <detail-drawer
                ref="comDrawer"
                :size-width="1000"
                custom-title
        >
            <template #title>

                <span v-if="datas.taskType == 1">区域招商</span>
                <span v-else-if="datas.taskType == 2">精细招商</span>
                <span v-else-if="datas.taskType == 3">终端直销</span>
                <span v-else-if="datas.taskType == 4">商业营销</span>

            </template>
            <template #contents>

                <signedDetailCom v-if="datas.taskType == 1" :id="relationData.planDetail.id"/>

                <fineDetailCom v-if="datas.taskType == 2" :id="relationData.planDetail.id"/>

                <directDetailCom v-if="datas.taskType == 3" :id="relationData.planDetail.id"/>

                <businessDetailCom v-if="datas.taskType == 4" :id="relationData.planDetail.id"/>

            </template>
        </detail-drawer>

        <detail-drawer
                ref="priceDrawer"
                :size-width="1000"
                custom-title
        >
            <template #title>

                <span>产品终端价 - {{ relationData.planInfo.priceNumber }}</span>

            </template>
            <template #contents>

                <terminalPrice :id="relationData.planInfo.productPriceId" />

            </template>
        </detail-drawer>

    </div>
</template>

<script>
    import { useRoute, useRouter } from 'vue-router'
    import { defineComponent, defineAsyncComponent, reactive, toRefs, inject, getCurrentInstance, onMounted } from 'vue'
    export default defineComponent({
        name: "index",
        components:{
            signedDetail:defineAsyncComponent(()=>import('../../modules/signedDetail.vue')),
            fineDetail:defineAsyncComponent(()=>import('../../modules/fineDetail.vue')),
            agentLibrary:defineAsyncComponent(()=>import('../../modules/agentLibrary.vue')),
            businessDetail:defineAsyncComponent(()=>import('../../modules/businessDetail.vue')),
            directDetail:defineAsyncComponent(()=>import('../../modules/directDetail.vue')),
            altBusinessDialog:defineAsyncComponent(()=>import('../../modules/altBusinessDialog.vue')),
            allocationDialog:defineAsyncComponent(()=>import('../../modules/allocationDialog.vue')),
            altDirectDialog:defineAsyncComponent(()=>import('../../modules/altDirectDialog.vue')),
            signedDetailCom:defineAsyncComponent(()=>import('../../../../commonView/detailComponents/publicityDetail/signedDetail.vue')),
            fineDetailCom:defineAsyncComponent(()=>import('../../../../commonView/detailComponents/publicityDetail/fineDetail.vue')),
            directDetailCom:defineAsyncComponent(()=>import('../../../../commonView/detailComponents/publicityDetail/directDetail.vue')),
            businessDetailCom:defineAsyncComponent(()=>import('../../../../commonView/detailComponents/publicityDetail/businessDetail.vue')),
            terminalPrice:defineAsyncComponent(()=>import('../../../../commonView/detailComponents/product/terminalPrice.vue'))
        },
        setup(){
            const currentInstance = getCurrentInstance()
            const route = useRoute()
            const router = useRouter()
            const api = inject('api')

            var data = reactive({
                detailDrawer:null,
                libraryData: {
                    agentType: '',
                    productId: 0,
                    provinceCode: '',
                    cityCode: '',
                    areaCode: '',
                    terminalId: 0,
                    from: '1'
                },
                datas:{},
                allData:{
                    saleTask:{}
                },
                relationData:{},
                altBusiness:null,
                refAllocation:null,
                altDirectDialog:null,
                comDrawer:null,
                priceDrawer:null,
            })

            const onAllocation = () => {
                if (data.datas.taskType == 1 || data.datas.taskType == 2){
                    data.refAllocation.open(data.datas)
                }else if (data.datas.taskType == 4){
                    data.altBusiness.open(data.datas)
                }else if (data.datas.taskType == 3){
                    data.altDirectDialog.open(data.datas)
                }
            }

            const onAgent = () => {
                data.detailDrawer.open()
            }

            const onBack = () => {
                router.back()
            }

            const getData = () => {
                api.task.TASK_SALE_TASK_DETAIL(route.query.id).then(res=>{
                    if (!res.code){
                        data.datas = res.data.data.saleTask;
                        data.allData = res.data.data
                        if (data.datas.relationData){
                            data.relationData = JSON.parse(data.datas.relationData)
                            console.log(data.relationData)
                            data.libraryData.productId = data.datas.productId
                            if (data.relationData.planDetail.planType == 1) {
                                data.libraryData.from = '2'
                                data.libraryData.provinceCode = data.relationData.planDetail.terminalProvince
                                data.libraryData.cityCode = data.relationData.planDetail.terminalCity
                                data.libraryData.areaCode = data.relationData.planDetail.terminalArea
                                data.libraryData.terminalId = data.relationData.planDetail.terminalId
                            } else {
                                data.libraryData.from = '1'
                                data.libraryData.provinceCode = data.relationData.planDetail.provinceCode
                                data.libraryData.cityCode = data.relationData.planDetail.cityCode
                                data.libraryData.areaCode = data.relationData.planDetail.areaCode
                            }
                            console.log(data.libraryData)
                        }
                    }else {
                        currentInstance.proxy.customMessage({type:'error',message:res.msg})
                    }
                })
            }

            const onPlan = () => {
                data.comDrawer.open()
            }

            const onPrice = () => {
                console.log(data.relationData.planInfo.productPriceId)
                data.priceDrawer.open()
            }

            onMounted(() => {
                getData()
            })

            return{
                ...toRefs(data),

                onBack,
                onAllocation,
                onAgent,
                getData,
                onPlan,
                onPrice,
            }
        }
    })
</script>

<style lang="scss" scoped>
    @import "@/style/basics.scss";
    .view-title{
        margin:  0 20px;
        font-size: $font-size-title;
    }
</style>
